import React,{useState} from 'react';
import ReactDOM from 'react-dom';
// import './index.css';
// import App from './App';
// import reportWebVitals from './reportWebVitals';

// ReactDOM.render(
//   <React.StrictMode>
//     <App />
//   </React.StrictMode>,
//   document.getElementById('root')
// );

// // If you want to start measuring performance in your app, pass a function
// // to log results (for example: reportWebVitals(console.log))
// // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
// reportWebVitals();

// import React from './react/index'
// import ReactDOM from './react-dom/index'

// import React,{useState} from 'react';


// class ClassComponent extends React.Component {
//   render () {
//     return (
//       <div className="title" style={{ color: 'red' }}><p>hello11</p><p>world儿童</p></div>
//     )
//   }
// }


// class Counter extends React.Component {
//   constructor(props) {
//     super(props)
//     this.state = { number: 0 };
//   }
//   handleClick = () => {
//     this.setState({ number: this.state.number + 1 })
//   }
//   render() {
//     return (
//       <div>
//         <p>number:{this.state.number}</p>
//         <button onClick={this.handleClick}>+</button>
//       </div>
//     )
//   }
// }


// class Counter extends React.Component {
//   static default = {
//     name: 'dj'
//   }
//   constructor(props) {
//     super(props)
//     this.state = {number: 0}
//     console.log('constructor')
//   }
//   handleClick = () => {
//     this.setState({ number: this.state.number + 1 })
//   }
//   componentWillMount() {
//     console.log('componentWillMount')
//   }
//   componentDidMount() {
//     console.log('componentDidMount')
//   }
//   componentWillUpdate() {
//     console.log('componentWillUpdate');
//   }
//   componentDidUpdate() {
//     console.log('componentDidUpdate');
//   }
//   render() {
//     console.log('render')
//     return(
//       <div>
//         <p>{this.state.number}</p>
//         <button onClick={this.handleClick}>+</button>
//       </div>
//     )
//   }
// }

let ThemeContext = React.createContext(null);

class Page extends React.Component{
  constructor(props) {
      super(props);
      this.state = { color: 'red' };
  }
  changeColor = (color) => {
      this.setState({ color });
  }
  render() {
      let contextVal = { changeColor: this.changeColor, color: this.state.color };
      return (
          <ThemeContext.Provider value={contextVal}>
              <div style={{ margin: '10px', border: `5px solid ${this.state.color}`, padding: '5px', width: 200 }}>
                  page
                  {/* <Header />
                  <Main /> */}
              </div>
          </ThemeContext.Provider>

      )
  }
}





function Counter(){
  const [number,setNumber] = useState(0);
  return (
      <>
          <p>{number}</p>
          <button onClick={()=>setNumber(number+1)}>+</button>
      </>
  )
}










ReactDOM.render(<Counter />, document.getElementById('root'));







// function FunctionComponent(props) {
//   return (
//     <div className="title" style={{ color: 'red' }}><p>hello11</p><p>world</p></div>
//   )
// }


// let element = <ClassComponent name="hello"></ClassComponent>

// console.log(element);

// ReactDOM.render(element, document.getElementById('root'));

// class Counter{
//   constructor(props) {

//   }

//   render () {
//     return (
//       <div>
//         <button>按钮</button>
//       </div>
//     )
//   }
// }

// function Counter() {
//   return (
//     <div>
//       <button>按钮1</button>
//       <button>按钮2</button>
//     </div>
//   )
// }

// // console.log(<Counter title="计数器" />)

// ReactDOM.render(<Counter title="计数器" />, document.getElementById('root'))
